<template>
  <div class="minplayer">
    <van-row gutter="10" type="flex" class="mini" :class="{ height: !show, bottom: show }">
      <van-col span="4" @click="open">
        <span class="img_box">
      <img
       v-show="!myshow"
         class="disc"   
            src="@/static/img/disc.png"
         
          />

          <img
            v-show="this.currentIndex>=0"
            :src="currentSong.picUrl + '?param=120y120'"
            :class="{ pause: !playing }"
          />
         <img
            v-show="this.currentIndex==-1"
            src="../../static/img/qqlogo.png"
            :class="{ pause: !playing }"
          />
            <div class="imgb"></div>
        </span>
      </van-col>
      <van-col span="15" @click="open" class="van-ellipsis">
        <span>
             <p v-show="this.currentIndex>=0">{{ currentSong.ar }}</p>
          <p class="songname" :class="{isgun:playing, songname:true}" v-show="this.currentIndex>=0">{{ currentSong.name }}</p>
       
          <p v-show="this.currentIndex==-1" class="nomusic">音乐未加载</p>
        </span>
      </van-col>
      <van-col tag="div" class="btnr" span="5">
        <span @click="play" v-if="!playing" class="iconfont">&#xe696;</span>
        <span @click="stopPlay" v-else class="iconfont">&#xe6ad;</span>
        <span class="iconfont" @click="showPopup">&#xe636;</span>
      </van-col>
    </van-row>
    <!-- 音乐列表 -->
    <van-popup
      v-model="list"
      round
      duration=".5"
      lock-scroll
      position="bottom"
      :style="{ height: '60%' }"
    >
      <MusicMusicList />
    </van-popup>
  </div>
</template>

<script>
import MusicMusicList from "./music_list.vue";
import { mapGetters, mapState } from "vuex";

export default {
  name: "MusicMiniPlayer",
  components: {
    MusicMusicList,
  },
  props: ["currentSong"],

  data() {
    return {
      list: false,
    };
  },
  mounted() {},
  computed: {
    ...mapGetters(["currentIndex","playing"]),
    ...mapState({show: (state) => state.Highly,}),
    
 ...mapState({   myshow: state => state.myshow,  }),
  },
  methods: {
    // 打开大屏
    open() {
      this.$store.commit("SET_FULLSCREEN", true);
    },
    // 播放
    play() {
      this.$store.commit("SET_PLAY", true);
    },
    stopPlay() {
      this.$store.commit("SET_STOPPLAY", false);
    },
    // 打开音乐列表
    showPopup() {
      this.list = true;
    },
  },
};
</script>

<style lang="less" scoped>

// 动画
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.height {
  bottom: 0rem;
}
.bottom {
  bottom: 3.125rem;
}
.mini {
     background: #eedfcc url(../../static/img/bg.jpg) no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
   border-radius:0 1.5625rem 1.5625rem 0;
    .disc{
        display: block;
        position: absolute;
        z-index: -1;
        left: 1.31rem;
         animation-play-state: paused;
      }
  position: fixed;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 3.125rem;
  background-color: #eee;
  .van-col:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
    .img_box {
      height: 2.625rem;
      width: 2.625rem;
      padding: .125rem;
      border: 1px solid #34c37e ;
      background-color: #34c37e;
      border-radius: 50%;
      .imgb{
      position: relative;
      height:  2.625rem;
      width: 2.625rem;
      transform: translate(0%, -2.625rem) scale(1.25);
    z-index: -1;
  background: radial-gradient(24px,#34c37e,#666 100%);
    }
      img {
        display: block;
        width:  2.625rem;
        height:  2.625rem;
        border-radius: 50%;
      }
      .pause {
        animation-play-state: paused;
      }
    }
  }
  .van-col:nth-child(2) {
    display: flex;
    flex-direction: column;
    p:nth-child(1) {
      font-size:14px;
      text-align: center;
      height: 1.25rem;
      line-height: 1.25rem;
    }
    p:nth-child(2) {
       height: 1.875rem;
      line-height: 1.875rem;
      font-size: .975rem;
     text-align: center;
        white-space: nowrap;
       
    }
    .isgun{
       text-align:left!important;
       animation: gun 10s linear infinite;
    }
    .nomusic{
      height: 3.125rem;
      line-height: 3.125rem;
    }
  }
  .btnr{
  
    border-radius:0 1.5625rem 1.5625rem 0;
  }
  .van-col:nth-child(3) {
    display: flex;
    justify-content: center;
    align-items: center;
    .iconfont {
      margin: 0 .5rem;
    }
    .iconfont:nth-child(1) {
      font-size: 1.5rem;
      color: #34c37e;
    }
    .iconfont:nth-child(2) {
      font-size: 1.875rem;
      color: #34c37e;
    }
  }
}
@keyframes gun {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(200%);
  }
}
 @keyframes masked-animation {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -100% 0;
    }
}
</style>